<template>
  <!-- 首页 -->
  <div class="home">
    <div class="home_left">
      <div class="home_info">
        <div class="home_info_box">
          <div class="info_avater">
            <img
              v-if="userInfo.supplierInformationCompanyLogoUrl"
              :src="userInfo.supplierInformationCompanyLogoUrl | urlLoad"
              alt=""
              class="avater"
            />
            <img class="avater" v-else src="../assets/layout/no.png" alt="" />
            <div
              v-if="member && userInfo.identityType >= 4"
              class="info_member"
            >
              <span>{{ type[userInfo.identityType] }}</span>
            </div>
            <div
              v-else-if="member && userInfo.identityType == 3"
              class="info_member levelThree"
            >
              <span>{{ type[userInfo.identityType] }}</span>
            </div>
            <div
              v-else-if="member && userInfo.identityType == 2"
              class="info_member levelTwo"
            >
              <span>{{ type[userInfo.identityType] }}</span>
            </div>
          </div>
          <div class="info_text">
            <div class="info_text_name">
              <div class="info_name">{{ userInfo.supplierInformationCompanyName }}</div>
              <div class="mobile" v-if="userInfo.identityType == 1">
                <div style="margin-right: 0.2rem">
                  {{ userInfo.memberAccount.mobile }}
                </div>
              </div>
              <img v-if="userInfo.identityType == 1" src="../assets/home/icon_sy_wrz@2x.png" alt="" />
              <img v-else src="../assets/home/icon_sy_ysrz@2x.png" alt="" />
            </div>
            <div v-if="userInfo.identityType !== 1">
              <div class="info_message">
                主营：{{ userInfo.supplierInformationTheMainType + " " + userInfo.supplierInformationTheMainProduct }}
              </div>
              <div class="info_message">
                地址：{{ userInfo.supplierInformationAddress }}
              </div>
            </div>
          </div>
        </div>
        <div
          :class="['home_info_message', { overflowClass: isOverflow == false }]"
        >
          {{ userInfo.supplierInformationCompanyBrief }}
        </div>

        <!-- 点击展示全部 -->
        <img
          class="image"
          src="../assets/home/icon_sy_down@2x.png"
          @click="showAll"
          alt=""
          v-if="isOverflow == false"
        />
        <img
          class="image"
          src="../assets/home/icon_up@2x.png"
          @click="showAll"
          alt=""
          v-else
        />
      </div>
      <div class="home_member">
        <div class="home_member_person" v-if="userInfo.identityType == 1">
          <!-- <div class="home_member_title">暂无权限</div> -->
          <img src="../assets/home/pic_sy_none@2x.png" class="picture" alt="" />
          <div class="home_member_text">您还未发布任何求购信息！</div>
          <button class="home_member_btn" @click="supplierEnter">
            发布采购
          </button>
        </div>
        <div v-else-if="userInfo.identityType == 2" class="home_member_shop">
          <div class="home_member_text">
            您可以上架{{ this.pmInfo.countOne }}条产品信息
          </div>
          <button class="home_member_btn" @click="publishPurchase">
            发布供应
          </button>
        </div>

        <div v-else class="home_member_shop">
          <div class="home_member_text">
            您现可无限发布产品信息
          </div>
          <button class="home_member_btn" @click="publishPurchase">
            发布供应
          </button>
        </div>
      </div>
    </div>
    <div class="home_right">
      <img src="../assets/home/pic_sy_ewm.png" alt="" />
      <p>有问题请联系平台客服</p>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    console.log("homeCreated");

    this.getUserInfo();
    this.getAddressList();
    this.getRemainingNumber();
  },
  data() {
    return {
      member: true,
      shop: true,
      userInfo: {},
      type: [
        "",
        "普通用户",
        "普通会员",
        "优塑会员",
        "优企会员",
        "优企会员",
        "优企会员",
        // "优企会员-优选品牌",
        // "优企会员-优企供应商",
        // "优企会员-两者都是",
      ],
      isOverflow: false,
      pmInfo: {},
      userInfoId: "",
    };
  },
  methods: {
    async getUserInfo() {
      let res = await this.$apiFun.getUserInfo();
      this.userInfo = res.result;
      this.userInfoId = res.result.id;

      let info = {
        id: res.result.id,
        // id: res.result.memberAccount.id,
        identityType: res.result.identityType,
        vipLoseEfficacyTime: res.result.vipLoseEfficacyTime,
        vipTakeEffectTime: res.result.vipTakeEffectTime,
        mobile: res.result.mobile,
        hasSupplierInformation: res.result.hasSupplierInformation,
        // head: res.result.head,
      };
      sessionStorage.setItem("userInfo", JSON.stringify(info));
    },
    publishPurchase() {
      if (this.userInfo.identityType >= 2) {
        this.$router.replace("./issue_supply");
      }
    },
    supplierEnter() {
      this.$router.replace("./publish_purchase");
    },

    // 地址列表
    async getAddressList() {
      let res = await this.$apiFun.getAddressList();
      this.addressData = res.result.rows.map((row) => {
        return { ...row, show: false };
      });
      if(this.addressData.length > 0) {
        let mainAddress = {
          province: this.addressData[0].supplierInformationProvince,
          city: this.addressData[0].supplierInformationCity,
          abbreviation: this.addressData[0].abbreviation,
        };
        sessionStorage.setItem("InfoAddress", JSON.stringify(mainAddress));
      }
    },

    showAll() {
      this.isOverflow = !this.isOverflow;
    },

    // 剩余可发布数
    async getRemainingNumber() {
      // let info = JSON.parse(sessionStorage.getItem("userInfo"));
      // console.log("info",info);
      // this.userInfo = info;
      let res = await this.$apiFun.getRemainingNumber({
        memberId: this.userInfoId,
        status: 1,
      });
      if (res.code == 200) {
        this.pmInfo = res.result;
      }
    },
  },

  watch: {
    "$route.name": {
      handler() {
        this.getRemainingNumber();
        this.getUserInfo();
      },
    },
    immediate: true,
    deep: true,
  },
};
</script>

<style lang="less" scoped>
.home {
  display: flex;
  .home_left {
    flex: 1;
    margin-right: 0.2rem;
    .home_info {
      background: #ffffff;
      box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
      border-radius: 10px;
      padding: 0.3rem 0.5rem;
      .home_info_box {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        .info_avater {
          margin-right: 0.3rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          // align-items: flex-start;
          .avater {
            width: 1rem;
            height: 1rem;
          }
          .info_member {
            margin-top: 15px;
            width: 0.72rem;
            height: 0.24rem;
            background: #242424;
            border-radius: 12px;

            color: #ffdc83;
            line-height: 0.24rem;
            span {
              // transform: scale(0.8);
              font-size: 0.15rem;
              font-weight: 500;
              display: block;
            }
          }
          .levelThree {
            background: #3756df;
            color: #ffffff;
          }
          .levelTwo {
            background: #525252;
            color: #fff;
          }
        }
        .info_text {
          text-align: left;
          .info_text_name {
            display: flex;
            align-items: flex-start;
            flex-direction: column;
            .info_name {
              // font-size: 0.24rem;
              // font-weight: bold;
              // color: #333333;
              line-height: 0.34rem;
              // margin-right: 0.1rem;

              font-size: 0.2rem;
              font-weight: bold;
              color: #333333;
            }
            img {
              width: 0.9rem;
              // height: 0.28rem;
            }
          }
          .info_message {
            margin-top: 0.1rem;
            font-size: 0.18rem;
            font-weight: 400;
            color: #333333;
          }
        }
      }
      .overflowClass {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
      .home_info_message {
        // height: 0.72rem;
        // overflow: hidden;
        font-size: 0.16rem;
        font-weight: 400;
        color: #666666;
        line-height: 0.24rem;
        text-align: left;
        margin-top: 0.15rem;
      }

      .image {
        width: 0.14rem;
        height: 0.08rem;
        display: block;
        margin: 10px auto 0;
        cursor: pointer;
      }
    }
    .home_member {
      background: #ffffff;
      box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
      border-radius: 10px;
      margin-top: 0.2rem;
      .home_member_text {
        font-size: 0.18rem;
        font-weight: 400;
        color: #333333;
        line-height: 0.3rem;
      }
      .home_member_btn {
        margin-top: 0.6rem;
        width: 2.3rem;
        height: 0.4rem;
        background: #f42551;
        border-radius: 5px;
        font-size: 0.16rem;
        font-weight: bold;
        color: #ffffff;
        line-height: 0.4rem;
        border: none;
        cursor: pointer;
      }
      .home_member_title {
        margin-bottom: 0.3rem;
        font-size: 0.2rem;
        font-weight: bold;
        color: #333333;
        line-height: 0.3rem;
      }
      .home_member_shop {
        padding: 0.9rem 0rem 0.75rem;
      }
      .home_member_person {
        padding: 0.4rem 0rem 0.62rem;
        .picture {
          width: 1.5rem;
        }
      }
    }
  }
  .home_right {
    height: 5.4rem;
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    padding: 0.6rem 0.4rem 0rem;
    img {
      width: 1.8rem;
      height: 1.8rem;
    }
    p {
      font-size: 0.18rem;
      font-weight: 400;
      color: #333333;
      line-height: 0.3rem;
      margin-top: 0.15rem;
    }
  }
}

.mobile {
  display: flex;
  align-items: center;
  font-size: 0.22rem;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
</style>
